<!--
 * @Author: lailifang
 * @Date: 2022-03-15 17:12:30
 * @Description: 预警预报种类
-->
<template>
  <div class="bottom" v-if="loading">
    <div class="btns btnL" @click="leftClick"></div>
    <div class="btns btnR" @click="rightClick"></div>
    <ul class="uls">
      <li v-for="(item, index) of listData.data" :key="index" :ref="setRef">
        <img class="icon" :src="images(item.img)" alt="" />
        <div class="rItem">
          <p class="name">{{ item.type }}</p>
          <!-- <el-scrollbar
            ref="scrollbar"
            height="84px"
            @scroll="handleScroll"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
          >
            <div class="cItem">
              <div class="item" v-for="(e, i) of item.detail" :key="i">
                <span class="label">{{ e.name }}</span>
                <span class="num" :class="e.value > 0 ? 'num1' : 'num2'">{{
                  Math.abs(e.value)
                }}</span>
              </div>
            </div>
          </el-scrollbar> -->
          <div class="cItem">
            <div class="item" v-for="(e, i) of item.detail" :key="i">
              <span class="label">{{ e.name }}</span>
              <span class="num" :class="e.value > 0 ? 'num1' : 'num2'">{{
                Math.abs(e.value)
              }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  nextTick,
  onBeforeUpdate,
  reactive,
  ref,
  watch
} from 'vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'bottom',
  components: {},
  props: {
    adcode: {
      type: String,
      default: ''
    },
    timeValue: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const loading = ref(false)
    const listData = reactive({
      data: []
    })
    const listApi = () => {
      httpRequest
        .get({
          url: 'M4warningSpecies',
          params: {
            adcode: props.adcode,
            startTime: props.timeValue[0],
            endTime: props.timeValue[1]
          }
        })
        .then((res) => {
          listData.data = res.data
          loading.value = true
        })
        .catch(() => {
          console.log('请求失败')
        })
    }
    const images = (e: any) => {
      return require(`../../../assets/images/M4/${e}`)
    }
    const pos = reactive({
      mainLeft: 320,
      gap: 16
    })
    // li滚动的参数
    const scrollDrag = reactive({
      miniLiN: 5, //小图数量
      miniLiW: 336, //图的宽度加间距
      marginLeft: 0
    })
    let liRefs = ref<HTMLElement[]>([])
    const setRef = (el: HTMLBaseElement) => {
      if (el) {
        liRefs.value.push(el)
      }
    }
    onBeforeUpdate(() => {
      liRefs.value = [] //初始化
      nextTick(() => {
        for (let i = 0; i < liRefs.value.length; i++) {
          liRefs.value[i].style.left = (pos.mainLeft + pos.gap) * i + 'px'
        }
      })
    })
    const leftClick = (event: any) => {
      event.target.nextSibling.style.cursor = 'pointer'
      scrollDrag.miniLiN = liRefs.value.length
      // 获取当前li的margin-left
      scrollDrag.marginLeft = Number(
        liRefs.value[0].style.marginLeft.replace('px', '')
      )
      // 获取当前li的序号（从1开始）
      let dragNum = Math.abs(scrollDrag.marginLeft / scrollDrag.miniLiW) + 1

      if (dragNum > 5) {
        for (let i = 0; i < liRefs.value.length; i++) {
          liRefs.value[i].style.marginLeft =
            scrollDrag.marginLeft + scrollDrag.miniLiW * 5 + 'px'
        }
      } else {
        // 此时余下的小窗不够5个，滚动剩余的个数
        let scrollRem = dragNum - 1
        for (let i = 0; i < liRefs.value.length; i++) {
          liRefs.value[i].style.marginLeft =
            scrollDrag.marginLeft + scrollDrag.miniLiW * scrollRem + 'px'
        }
      }
      setTimeout(() => {
        if (Number(liRefs.value[0].style.marginLeft.replace('px', '')) == 0) {
          event.target.style.cursor = 'auto'
        } else {
          event.target.style.cursor = 'pointer'
        }
      }, 500)
    }
    const rightClick = (event: any) => {
      event.target.previousSibling.style.cursor = 'pointer'
      scrollDrag.miniLiN = liRefs.value.length
      // 获取当前li的margin-left
      scrollDrag.marginLeft = Number(
        liRefs.value[0].style.marginLeft.replace('px', '')
      )
      // 获取当前li的序号（从1开始）
      let dragNum = Math.abs(scrollDrag.marginLeft / scrollDrag.miniLiW) + 1

      if (scrollDrag.miniLiN - dragNum > 9) {
        for (let i = 0; i < liRefs.value.length; i++) {
          liRefs.value[i].style.marginLeft =
            scrollDrag.marginLeft - scrollDrag.miniLiW * 5 + 'px'
        }
      } else {
        let scrollRem = scrollDrag.miniLiN - dragNum - 4
        for (let i = 0; i < liRefs.value.length; i++) {
          liRefs.value[i].style.marginLeft =
            scrollDrag.marginLeft - scrollDrag.miniLiW * scrollRem + 'px'
        }
        event.target.style.cursor = 'auto'
      }
    }
    // 滚动
    // const scrollbar = ref()
    // let curTop = 0
    // let timer: any = null
    // let timerFlag = true
    // nextTick(() => {
    //   timer = setInterval(() => {
    //     console.log(scrollbar.value)

    //     if (timerFlag) {
    //       curTop++
    //       scrollbar.value.setScrollTop(curTop)
    //       if (curTop >= scrollbar.value.wrap$.scrollTop) {
    //         curTop = 0
    //       }
    //     }
    //   }, 50)
    // })
    // onBeforeUnmount(() => {
    //   timer && clearInterval(timer)
    // })
    // const handleMouseEnter = () => {
    //   timerFlag = false
    // }
    // const handleMouseLeave = () => {
    //   timerFlag = true
    // }
    // const handleScroll = (val: any) => {
    //   curTop = val.scrollTop
    // }
    watch(
      () => [props.adcode, props.timeValue],
      () => {
        loading.value = false
        listApi()
      }
    )
    return {
      loading,
      listData,
      scrollDrag,
      pos,
      images,
      rightClick,
      leftClick,
      setRef
    }
  }
})
</script>
<style lang="less" scoped>
.bottom {
  display: flex;
  position: relative;
  z-index: 10;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 126px;
  margin-top: 36px;
  .btns {
    position: absolute;
    width: 47px;
    height: 36px;
  }
  .btnL {
    cursor: pointer;
    left: 10px;
    background: url('../../../assets/images/M4/left-icon.png') no-repeat center;
  }
  .btnR {
    cursor: pointer;
    right: 10px;
    background: url('../../../assets/images/M4/right-icon.png') no-repeat center;
  }
  .uls {
    position: relative;
    width: 1680px;
    height: 132px;
    overflow: hidden;
    li {
      position: absolute;
      display: flex;
      align-items: center;
      padding: 14px 0;
      width: 320px;
      height: 132px;
      background: url('.././../../assets/images/M4/yjyb-bg.png') no-repeat;
      background-size: 100% 100%;
      transition: all 1s;
      .icon {
        width: 112px;
        height: 112px;
      }
      .rItem {
        width: calc(100% - 120px);
        height: 100%;
        .name {
          text-align: center;
          font-size: 20px;
          color: #62ffe3;
          font-family: 'Benmo';
          font-weight: bold;
          margin-bottom: 5px;
        }
        .cItem {
          margin: 0 10px;
          .item {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            .label {
              font-size: 16px;
              color: #1e89fc;
            }
            .num {
              color: #00e4ff;
              font-weight: bold;
            }
            .num1 {
              position: relative;
              &::after {
                position: absolute;
                content: '';
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 15px;
                background: url('../../../assets/images/M4/rise-icon.png');
              }
            }
            .num2 {
              position: relative;
              &::after {
                position: absolute;
                content: '';
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 15px;
                background: url('../../../assets/images/M4/low-icon.png');
              }
            }
          }
        }
      }
    }
  }
}
</style>
